<template>
  <el-row :gutter="20" class="panel-group">
    <el-col v-if="roleId === 295 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('sqrs')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            申请人数
          </div>
          <count-to :start-val="0" :end-val="sqrs" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <!--
    <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col" v-if="roleId === 295 || roleId === 547">
      <div class="card-panel" @click="handleSetLineChartData('pgcg')">
        <div class="card-panel-icon-wrapper icon-pgcg">
          <svg-icon icon-class="hulipinggudan" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            评估成功
          </div>
          <count-to :start-val="0" :end-val="pgcg" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    -->
    <el-col v-if="roleId === 295 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('pgrc')">
        <div class="card-panel-icon-wrapper icon-pgrc">
          <svg-icon icon-class="yingyerenyuan" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            评估人次
          </div>
          <count-to :start-val="0" :end-val="pgrc" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 295 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('pgfy')">
        <div class="card-panel-icon-wrapper icon-pgfy">
          <svg-icon icon-class="jishujiaoyijiagepingguxitong" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            评估费用
          </div>
          <count-to :start-val="0" :end-val="pgfy" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 295 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('sqcg')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="hetongshenpishenqingliucheng-03" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            申请成功
          </div>
          <count-to :start-val="0" :end-val="sqcg" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('ygs')">
        <div class="card-panel-icon-wrapper icon-announce">
          <svg-icon icon-class="menu_swgs" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            已公示
          </div>
          <count-to :start-val="0" :end-val="ygs" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('yqy')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="renwuqianyue" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            签约
          </div>
          <count-to :start-val="0" :end-val="yqy" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('yfw')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="fuwu" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            已服务
          </div>
          <count-to :start-val="0" :end-val="yfw" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId === 547" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('fwrc')">
        <div class="card-panel-icon-wrapper icon-renshu">
          <svg-icon icon-class="shiyourenkou" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            服务人次
          </div>
          <count-to :start-val="0" :end-val="fwrc" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <!-- =============================================================================================================== -->
    <el-col v-if="roleId === 51 || roleId ===10714" :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('cntZhsq')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="link" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            照护申请中
          </div>
          <count-to :start-val="0" :end-val="cntZhsq" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId ===10714" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('cntZhsqfh')">
        <div class="card-panel-icon-wrapper icon-pgfy">
          <svg-icon icon-class="menu_swgs" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text1">
            已复核照护
          </div>
          <count-to :start-val="0" :end-val="cntZhsqfh" :duration="3600" class="card-panel-num1" />
          <div class="card-panel-text1">
            今日复核
          </div>
          <count-to :start-val="0" :end-val="cntJrfh" :duration="3600" class="card-panel-num1" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId ===10714" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('cntZhsqth')">
        <div class="card-panel-icon-wrapper icon-renshu">
          <svg-icon icon-class="exit-fullscreen" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text1">
            已退回照护
          </div>
          <count-to :start-val="0" :end-val="cntZhsqth" :duration="3600" class="card-panel-num1" />
          <div class="card-panel-text1">
            今日退回
          </div>
          <count-to :start-val="0" :end-val="cntJrth" :duration="3600" class="card-panel-num1" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId ===10714" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('cntZhsqbh')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="edit" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text1">
            已驳回照护
          </div>
          <count-to :start-val="0" :end-val="cntZhsqbh" :duration="3600" class="card-panel-num1" />
          <div class="card-panel-text1">
            今日驳回
          </div>
          <count-to :start-val="0" :end-val="cntJrbh" :duration="3600" class="card-panel-num1" />
        </div>
      </div>
    </el-col>
    <el-col v-if="roleId === 51 || roleId ===10714" :xs="15" :sm="15" :lg="5" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('cntZhsqjjgq')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="jiekuanqixian" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            即将过期照护
          </div>
          <count-to :start-val="0" :end-val="cntZhsqjjgq" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <gkmx ref="gkmx" />
  </el-row>
</template>

<script>
import gkmx from './gkmx'
import CountTo from 'vue-count-to'
import { queryGk } from '@/api/business/home'
import { querOrgPageList } from '@/api/business/home'
import { mapGetters } from 'vuex'

export default {
  components: { CountTo, gkmx },
  data() {
    return {
      roleId: 0,
      sqrs: 0,
      pgcg: 0,
      pgrc: 0,
      pgfy: 0,
      sqcg: 0,
      ygs: 0,
      yqy: 0,
      yfw: 0,
      fwrc: 0,
      cntZhsq: 0,
      cntZhsqfh: 0,
      cntZhsqth: 0,
      cntZhsqbh: 0,
      cntZhsqjjgq: 0,
      cntJrfh: 0,
      cntJrth: 0,
      cntJrbh: 0
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    this.init()
  },
  methods: {
    handleSetLineChartData(type) {
      if (type === 'sqrs') {
        if (location.pathname !== 'system/home/ysq') {
          this.$router.push('system/home/ysq')
        }
      } else if (type === 'pgcg') {
        if (location.pathname !== 'system/home/pgcg') {
          this.$router.push('system/home/pgcg')
        }
      } else if (type === 'pgfy') {
        if (location.pathname !== 'system/home/pgfy') {
          this.$router.push('system/home/pgfy')
        }
      } else if (type === 'pgrc') {
        if (location.pathname !== 'system/home/pgrc') {
          this.$router.push('system/home/pgrc')
        }
      } else if (type === 'sqcg') {
        if (location.pathname !== 'system/home/sqcg') {
          this.$router.push('system/home/sqcg')
        }
      } else if (type === 'ygs') {
        if (location.pathname !== 'system/home/ygs') {
          this.$router.push('system/home/ygs')
        }
      } else if (type === 'yqy') {
        if (location.pathname !== 'system/home/yqy') {
          this.$router.push('system/home/yqy')
        }
      } else if (type === 'yfw') {
        if (location.pathname !== 'system/home/yfw') {
          this.$router.push('system/home/yfw')
        }
      } else if (type === 'fwrc') {
        if (location.pathname !== 'system/home/fwrc') {
          this.$router.push('system/home/fwrc')
        }
      } else if (type === 'cntZhsq') { // ============================================
        if (location.pathname !== 'homeApply/zhsqHome') {
          this.$router.push('homeApply/zhsqHome')
        }
      } else if (type === 'cntZhsqfh') {
        if (location.pathname !== 'homeApply/zhsqJgFh') {
          this.$router.push('homeApply/zhsqJgFh')
        }
      } else if (type === 'cntZhsqth') {
        if (location.pathname !== 'homeApply/zhsqJgTh') {
          this.$router.push('homeApply/zhsqJgTh')
        }
      } else if (type === 'cntZhsqbh') {
        if (location.pathname !== 'homeApply/zhsqJgBh') {
          this.$router.push('homeApply/zhsqJgBh')
        }
      } else if (type === 'cntZhsqjjgq') {
        if (location.pathname !== 'homeApply/ZhsqJgYgq') {
          this.$router.push('homeApply/ZhsqJgYgq')
        }
      }
    },
    /**
     * 查询首页概况
     */
    init() {
      this.roleId = this.user.roles[0].id
      console.log('============roleId:', this.roleId)
      queryGk().then(res => {
        this.sqrs = res.sqrs
        this.pgcg = res.pgcg
        this.pgrc = res.pgrc
        this.pgfy = res.pgfy
        this.sqcg = res.sqcg
        this.ygs = res.ygs
        this.yqy = res.yqy
        this.yfw = res.yfw
        this.fwrc = res.fwrc
      })
      if (this.roleId === 51 || this.roleId === 10714) {
        querOrgPageList().then(res1 => {
          console.log('============', res1)
          this.cntZhsq = res1.CNT_ZHSQ
          this.cntZhsqfh = res1.CNT_ZHSQFH
          this.cntZhsqth = res1.CNT_ZHSQTH
          this.cntZhsqbh = res1.CNT_ZHSQBH
          this.cntZhsqjjgq = res1.CNT_ZHSQJJGQ
          this.cntJrfh = res1.CNT_JRFH
          this.cntJrth = res1.CNT_JRTH
          this.cntJrbh = res1.CNT_JRBH
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-pgcg {
        background: #e315fa;
      }

      .icon-pgrc {
        background: #f8eb61;
      }

      .icon-pgfy {
        background: #0aec0d;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-announce {
        background: #56fcd0;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #eaac0e
      }

      .icon-renshu {
        background: #5f21c4
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-pgcg {
      color: #e315fa;
    }

    .icon-pgrc {
      color: #f8eb61;
    }

    .icon-pgfy {
      color: #0aec0d;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-announce {
      color: #56fcd0;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #eaac0e
    }

    .icon-renshu {
      color: #5f21c4
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-text1 {
        line-height: 12px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        margin-bottom: 6px;
      }

      .card-panel-num {
        font-size: 20px;
      }
      .card-panel-num1 {
        font-size: 14px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
